<template>
  <div class="box_item">
    <div class="item_box_left">
      <div class="left_item_box">
        <div class="top_box">
          <div class="left_box_top">
            <div style="width: 100%; height: 70%">
              <Pieprogress :data="dataGradeCoverage" v-if="dataGradeCoverage" />
            </div>
            <div style="font-size: 12px; margin-left: 15px">
              <span>数据</span>
              <span style="color: rgb(49, 190, 255)">分级</span>
              <span>覆盖率</span>
            </div>
          </div>
          <div style="width: 345px; height: 105px; margin-right: 10px">
            <StackedBarChart1 :totalCount="totalCount1" v-if="totalCount1 > 0 && digitizedCounts1.length > 0" :digitizedCounts="digitizedCounts1" />
          </div>
        </div>
        <div class="bottom_box">
          <div class="left_box_top">
            <div style="width: 100%; height: 70%">
              <Pieprogress :data="dataClassCoverage" v-if="dataClassCoverage" />
            </div>
            <div style="font-size: 12px; margin-left: 15px">
              <span>数据</span>
              <span style="color: rgb(45, 236, 114)">分类</span>
              <span>覆盖率</span>
            </div>
          </div>
          <div style="width: 345px; height: 105px; margin-right: 10px">
            <StackedBarChart :totalCount="totalCount" v-if="totalCount > 0 && digitizedCounts.length > 0" :digitizedCounts="digitizedCounts" />
          </div>
        </div>
      </div>
    </div>
    <div class="item_box_right">
      <div class="item_box">
        <div class="right_top_box">
          <div class="left_box_top">
            <div class="value">
              <span class="value_size" style="font-size: 20px; font-weight: 700">{{ realInterfaceCount }}</span
              ><span class="value_size_">个</span>
            </div>
            <div class="bg"></div>
            <div class="text">实时接口数</div>
          </div>
          <div class="left_box_top" style="margin-top: 15px">
            <div class="value">
              <span class="value_size" style="">{{ countBaseApiInfo }}</span
              ><span class="value_size_">个</span>
            </div>
            <div class="bg"></div>
            <div class="text">接口总数</div>
          </div>
        </div>
      </div>
      <div class="right_item_box">
        <div class="right_top">
          <div style="width: 131px">
            <span style="font-size: 10px; font-weight: 700; color: #cfeaff">接口订阅总数:</span>
            <span style="font-size: 16px; font-weight: 700; color: #37c9c9">{{ countBaseApiInfoAudit }}</span>
            <span style="font-size: 10px; font-weight: 400; color: #37c9c9">个</span>
          </div>
          <div class="tabs_box">
            <div :class="{ active: activeIndex === 0, tab: true }" @click="changeTabs(0)">订阅情况</div>
            <div :class="{ active: activeIndex === 1, tab: true }" @click="changeTabs(1)">调用情况</div>
          </div>
        </div>
        <div v-if="activeIndex === 0" class="right_middel">
          <div class="right_middel_bg" v-for="(item, index) in tabData" :key="index">
            <div style="text-align: center; font-size: 16px; font-weight: 700; color: #37c9c9">
              {{ item.value }}
            </div>
            <div style="text-align: center; font-size: 8px; font-weight: 600">
              {{ item.name }}
            </div>
          </div>
        </div>
        <div v-if="activeIndex === 0" class="right_dyqk">
          <Optin v-if="data6.length > 0" :categories="data5" :digitizedCounts="data6" />
        </div>
        <div class="right_xfqk" v-if="activeIndex === 1">
          <HorizontalBarChart1 :departments="data5" :taskCounts="data7" />
        </div>
      </div>
    </div>
    <Dialog :visible="bslwsVisible" dataChange="4" @close="bslwsVisible = false"> </Dialog>
  </div>
</template>
<script setup>
import Pieprogress from "../../../charts/Pieprogress.vue";
// StackedBarChart
import StackedBarChart from "../../../charts/StackedBarChart.vue";
import StackedBarChart1 from "../../../charts/StackedBarChart1.vue";
import { ref, onMounted, onUnmounted, onUpdated, onBeforeMount } from "vue";
import Optin from "../../../charts/optin.vue";
import Dialog from "../../../Dialog/Dialog.vue";
import HorizontalBarChart from "../../../charts/HorizontalBarChart.vue";
import HorizontalBarChart1 from "../../../charts/HorizontalBarChart1.vue";
import { countBaseApiLogTwo, countBaseApiInfoAuditTwo } from "@/api/index";
const bslwsVisible = ref(false);
// 数据资源已分类总数
import {
  GETdataResourceTotal,
  GETdataResourceGradeTotal,
  GETdataResourceGradeTotal1,
  GETdataClassCoverage,
  //分级
  GETspaceDataResource1,
  GETpublicServiceDataResource1,
  GETprojectDataResource,
  GETpersonalDataResource,
  GETmanageDataResource,
  GETindexDataResource,
  GETbusinessDataResource,
  //分类
  GETL4DataResource,
  GETL3DataResource,
  GETL2DataResource,
  GETL1DataResource,
} from "../../../../api/DataSafety";
import {
  GETrealInterfaceCount,
  GETcountBaseApiInfo,
  GETcountBaseApiInfoAudit,
  GETbaseApiLogSuccessDecimal,
  GETbaseApiLogNotSuccessDecimal,
  GETmeasureValueMK05020081,
  GETmeasureValueMK05020091,
  GETlistDwSuppObjectTypeName,
} from "@/api/index";
const data5 = ref([]);
const data7 = ref([]);
const countBaseApiLogTwo1 = async () => {
  await countBaseApiLogTwo().then((res) => {
    if (res.status == 200) {
      res.data.map((item) => {
        data5.value.push(item.name);
        data7.value.push(Number(item.value));
      });
      countBaseApiInfoAuditTwo1();
    }
  });
};
const data6 = ref([]);
const countBaseApiInfoAuditTwo1 = async () => {
  await countBaseApiInfoAuditTwo().then((res) => {
    if (res.status == 200) {
      res.data.map((item) => {
        data6.value.push(item.value);
      });
    }
  });
};
const activeIndex = ref(0);
const dataGradeCoverage = ref("");
const dataClassCoverage = ref("");
const digitizedCounts = ref([]);
const digitizedCounts1 = ref([]);

//数据共享开放
const realInterfaceCount = ref(230);
const countBaseApiInfo = ref(7654);
const countBaseApiInfoAudit = ref(23567);
const baseApiLogSuccessDecimal = ref("99%");
const tabData = ref([
  { name: "接口调用成功率", value: 99.9 },
  { name: "接口调用失败率", value: 99.9 },
  { name: "接口支撑应用数", value: 99.9 },
  { name: "接口支撑典型应用数", value: 99.9 },
]);
const changeTabs = (index) => {
  activeIndex.value = index;
};
const totalCount = ref(0);
GETdataResourceTotal().then((res) => {
  totalCount.value = res.data.count;
});
const totalCount1 = ref(0);
GETdataResourceGradeTotal().then((res) => {
  totalCount1.value = res.data.count;
  // console.log(totalCount1.value, "5555------------------------------5556");
});
//分级覆盖率
const awGETdataResourceGradeTotal1 = async () => {
  await GETdataResourceGradeTotal1().then((res) => {
    if (res.status == 200) {
      dataGradeCoverage.value = res.data.value;
    }
  });
};
//分类覆盖率
const awGETdataClassCoverage = async () => {
  await GETdataClassCoverage().then((res) => {
    dataClassCoverage;
    if (res.status == 200) {
      dataClassCoverage.value = res.data.value;
    }
  });
};
//数据安全分级
async function fetchAllData() {
  try {
    const [data1, data2, data3, data4, data5, data6, data7] = await Promise.all([
      GETspaceDataResource1(),
      GETpublicServiceDataResource1(),
      GETprojectDataResource(),
      GETpersonalDataResource(),
      GETmanageDataResource(),
      GETindexDataResource(),
      GETbusinessDataResource(),
    ]);
    const combinedData = [
      data1.data.count,
      data2.data.count,
      data3.data.count,
      data4.data.count,
      data5.data.count,
      data6.data.count,
      data7.data.count,
    ];
    digitizedCounts.value = combinedData;
  } catch (error) {
    console.error("Error fetching data:", error);
  }
}
//数据安全分类
async function fetchAllData1() {
  try {
    console.log("data1, data2, data3, data4 ssssssss");
    const [data1, data2, data3, data4] = await Promise.all([GETL4DataResource(), GETL3DataResource(), GETL2DataResource(), GETL1DataResource()]);
    console.log("data1, data2, data3, data4", data1, data2, data3, data4);
    const combinedData1 = [data1.data.count, data2.data.count, data3.data.count, data4.data.count];
    console.log("combinedData1", combinedData1);
    digitizedCounts1.value = combinedData1;
  } catch (error) {
    console.error("Error fetching data:", error);
  }
}

//实时接口数
const awGETrealInterfaceCount = async () => {
  await GETrealInterfaceCount().then((res) => {
    if (res.status == 200) {
      realInterfaceCount.value = res.data.count;
    }
  });
};
//接口总数
const awGETcountBaseApiInfo = async () => {
  await GETcountBaseApiInfo().then((res) => {
    if (res.status == 200) {
      countBaseApiInfo.value = res.data.count;
    }
  });
};
//接口订阅总数
const awGETcountBaseApiInfoAudit = async () => {
  await GETcountBaseApiInfoAudit().then((res) => {
    if (res.status == 200) {
      countBaseApiInfoAudit.value = res.data.count;
    }
  });
};

//接口成功率 失败率
async function fetchAllData2() {
  try {
    const [data1, data2, data3, data4] = await Promise.all([
      GETbaseApiLogSuccessDecimal(),
      GETbaseApiLogNotSuccessDecimal(),
      GETmeasureValueMK05020081(),
      GETmeasureValueMK05020091(),
    ]);
    //    { name: "接口调用成功率", value: 99.9 },
    // { name: "接口调用失败率", value: 99.9 },
    // { name: "接口支撑应用数", value: 99.9 },
    // { name: "接口支撑典型应用数", value: 99.9 },
    const combinedData2 = [
      { name: "接口调用成功率", value: data1.data.value },
      { name: "接口调用失败率", value: data2.data.value },
      { name: "接口支撑应用数", value: data3.data.value },
      { name: "接口支撑典型应用数", value: data4.data.count },
    ];
    tabData.value = combinedData2;
  } catch (error) {
    console.error("Error fetching data:", error);
  }
}
//
const awGETlistDwSuppObjectTypeName = async () => {
  await GETlistDwSuppObjectTypeName().then((res) => {
    console.log(res, "yyyyyyyyyyyyyy");
  });
};
onBeforeMount(() => {
  GETdataResourceTotal();
  GETdataResourceGradeTotal();

  awGETdataResourceGradeTotal1();
  awGETdataClassCoverage();

  fetchAllData();
  fetchAllData1();

  awGETrealInterfaceCount();
  awGETcountBaseApiInfo();
  awGETcountBaseApiInfoAudit();
  fetchAllData2();
  awGETlistDwSuppObjectTypeName();
  countBaseApiLogTwo1();
});
</script>
<style scoped>
.tabs_box {
  width: 150px;
  display: flex;
  justify-content: space-between;
}

.right_dyqk {
  /* height: 137px; */
  width: 98%;
  margin-top: 5px;
}

.right_xfqk {
  width: 98%;
  height: 175px;
  margin-top: 5px;
}

.right_middel_bg {
  width: 79px;
  height: 40px;
  background-image: url("../../img/88.png");
  background-repeat: no-repeat;
  background-position: center center;
}

.tab {
  width: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a2c65;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
}

.active {
  background: #103b8a !important;
}

.right_top {
  height: 28px;
  width: 98%;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

.right_middel {
  height: 40px;
  width: 98%;
  display: flex;
  justify-content: space-around;
  margin-top: 5px;
}

.text {
  font-family: Alibaba PuHuiTi 2;
  font-weight: 600;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  text-transform: uppercase;
}

.value {
  box-sizing: border-box;
  margin-left: 35px;
}

.value_size_ {
  color: #dbe8fe;
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0px;
  text-align: right;
}

.value_size {
  font-size: 20px;
  font-weight: 700;
  background: linear-gradient(180deg, #ffffff 0%, #7eaefd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg {
  box-sizing: border-box;
  width: 67px;
  height: 43px;
  margin-left: 25px;
  background-image: url("../../img/dz.png");
  background-repeat: no-repeat;
  background-position: center center;
}

.left_box_top {
  box-sizing: border-box;
  width: 115px;
  height: 105px;
  background-image: url("../../img/99.png");
  background-repeat: no-repeat;
  background-position: center center;
}

.right_top_box {
  box-sizing: border-box;
  padding-top: 40px;
  margin-left: 10px;
}

.bottom_box {
  box-sizing: border-box;
  padding-top: 15px;
  display: flex;
  justify-content: space-between;
}

.top_box {
  box-sizing: border-box;
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
}

.box_item {
  width: 1040px;
  height: 321px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

.item_box_left {
  box-sizing: border-box;
  padding-top: 40px;
  width: 514px;
  background-image: url("../../img/sjaq.png");
  background-repeat: no-repeat;
  background-position: center center;
}

.item_box_right {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding-top: 40px;
  width: 514px;
  background-image: url("../../img/sjyy.png");
  background-repeat: no-repeat;
  background-position: center center;
}

.left_item_box {
  box-sizing: border-box;
  padding-top: 30px;
  padding-left: 10px;
  background-image: url("../../img/sjaqd.png");
  background-repeat: no-repeat;
  background-position: center center;
  width: 494px;
  height: 280px;
}

.item_box {
  background-image: url("../../img/jkkf.png");
  background-repeat: no-repeat;
  background-position: center center;
  height: 280px;
  width: 135px;
}

.right_item_box {
  box-sizing: border-box;
  padding-top: 40px;
  padding-left: 10px;
  background-image: url("../../img/jkdyxf.png");
  background-repeat: no-repeat;
  background-position: center center;
  height: 280px;
  width: 354px;
}
</style>
